{% extends "base.html" %}

{% block title %}电影列表 - 电影管理系统{% endblock %}

{% block content %}
  <!-- 搜索栏 -->
  <div class="row mb-4">
    <div class="col-md-8 offset-md-2">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="搜索电影..." id="searchInput">
        <button class="btn btn-primary" type="button">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- 电影分类筛选 -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-outline-primary active">全部</button>
        <button type="button" class="btn btn-outline-primary">动作</button>
        <button type="button" class="btn btn-outline-primary">科幻</button>
        <button type="button" class="btn btn-outline-primary">喜剧</button>
        <button type="button" class="btn btn-outline-primary">剧情</button>
        <button type="button" class="btn btn-outline-primary">悬疑</button>
      </div>
    </div>
  </div>

  <!-- 电影列表 -->
  <div class="row g-4">
    {% for movie in movies %}
      <div class="col-md-4 col-lg-3">
        <div class="card movie-card position-relative">
          <!-- 评分徽章 -->
          <span class="badge bg-danger rating-badge">
                    <i class="fas fa-star"></i> {{ movie.rating }}
                </span>

          <img src="{{ movie.poster_url }}" class="card-img-top movie-poster" alt="{{ movie.title }}">

          <div class="card-body d-flex flex-column">
            <h5 class="card-title">{{ movie.title }}</h5>
            <p class="text-muted small mb-2">{{ movie.year }} | {{ movie.genre }}</p>
            <p class="card-text flex-grow-1 text-truncate-3">{{ movie.description }}</p>

            <div class="mt-3 d-flex justify-content-between align-items-center">
              <button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
                      data-bs-target="#movieDetailModal-{{ movie.id }}">
                <i class="fas fa-info-circle"></i> 详情
              </button>
              <button class="btn btn-sm btn-danger btn-delete" onclick="deleteMovie('{{ movie.id }}')">
                <i class="fas fa-trash-alt"></i> 删除
              </button>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}

    <!-- 空状态 -->
    {% if not movies %}
      <div class="col-12 text-center py-5 empty-state">
        <div class="empty-state-content">
          <i class="fas fa-film text-muted" style="font-size: 5rem;"></i>
          <h3 class="mt-3 text-muted">暂无电影数据</h3>
          <p class="text-muted">点击"添加电影"按钮添加新电影</p>
          <button class="btn btn-primary mt-3" data-bs-toggle="modal" data-bs-target="#addMovieModal">
            <i class="fas fa-plus-circle me-1"></i>添加电影
          </button>
        </div>
      </div>
    {% endif %}
  </div>
{% endblock %}

{% block modals %}
  <!-- 添加电影模态框 -->
  <div class="modal fade" id="addMovieModal" tabindex="-1" aria-labelledby="addMovieModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addMovieModalLabel">添加新电影</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="addMovieForm">
            <div class="row g-3">
              <div class="col-md-6">
                <label for="movieTitle" class="form-label">电影名称</label>
                <input type="text" class="form-control" id="movieTitle" required>
              </div>
              <div class="col-md-6">
                <label for="movieYear" class="form-label">上映年份</label>
                <input type="number" class="form-control" id="movieYear" min="1900"
                       max="{{ current_year + 5 }}" required>
              </div>
              <div class="col-md-6">
                <label for="movieGenre" class="form-label">类型</label>
                <select class="form-select" id="movieGenre" required>
                  <option value="">选择类型</option>
                  <option value="动作">动作</option>
                  <option value="科幻">科幻</option>
                  <option value="喜剧">喜剧</option>
                  <option value="剧情">剧情</option>
                  <option value="悬疑">悬疑</option>
                  <option value="爱情">爱情</option>
                </select>
              </div>
              <div class="col-md-6">
                <label for="movieRating" class="form-label">评分</label>
                <input type="number" class="form-control" id="movieRating" min="0" max="10" step="0.1"
                       required>
              </div>
              <div class="col-12">
                <label for="moviePoster" class="form-label">海报URL</label>
                <input type="url" class="form-control" id="moviePoster" required>
              </div>
              <div class="col-12">
                <label for="movieDescription" class="form-label">简介</label>
                <textarea class="form-control" id="movieDescription" rows="3" required></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="saveMovieBtn">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 电影详情模态框 -->
  {% for movie in movies %}
    <div class="modal fade" id="movieDetailModal-{{ movie.id }}" tabindex="-1"
         aria-labelledby="movieDetailModalLabel-{{ movie.id }}" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="movieDetailModalLabel-{{ movie.id }}">{{ movie.title }} - 详情</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-4">
                <img src="{{ movie.poster_url }}" class="img-fluid rounded" alt="{{ movie.title }}">
              </div>
              <div class="col-md-8">
                <h3>{{ movie.title }}</h3>
                <div class="mb-3">
                  <span class="badge bg-primary me-2">{{ movie.year }}</span>
                  <span class="badge bg-secondary me-2">{{ movie.genre }}</span>
                  <span class="badge bg-danger">
                                    <i class="fas fa-star"></i> {{ movie.rating }}
                                </span>
                </div>
                <h5>剧情简介</h5>
                <p>{{ movie.description }}</p>
                <div class="mt-4">
                  <h6>更多信息</h6>
                  <p>导演：待定</p>
                  <p>演员：待定</p>
                  <p>片长：待定</p>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  {% endfor %}
{% endblock %}

{% block extra_js %}
  <script>
    // 页面特定的JavaScript
    document.addEventListener('DOMContentLoaded', function () {
      // 检查初始空状态
      checkEmptyState();
    });
  </script>
{% endblock %}